<template>

	<view class="free_curriculum">
		<image :src="courseInfo.picture" mode="aspectFill"></image>
		<view class="">{{courseInfo.courseName}}</view>
		<view class="icon">入门 <text class="icon-renwu"></text></view>
		<view class="">免费</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'

	
	defineProps({
		courseInfo: {
			type: Object,
			default () {
				return {
					courseName: "默认名称",
					picture: "../../static/images/banner/banner1.jpg",
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.free_curriculum {
		padding: 20rpx;
		height: 200rpx;
		border-bottom: 1rpx solid #808080;
		// border-radius: 10rpx;
		// background-color: ghostwhite;
		// :nth-child(1){
		// 	margin:30rpx 0rpx 0rpx 0rpx;
		// }
	}

	.free_curriculum image {
		width: 40%;
		height: 160rpx;
		float: left;
		margin-right: 20rpx;
		// box-shadow: 0rpx 0rpx 5rpx 5rpx #dddddd;
		border-radius: 10rpx;
	}

	.free_curriculum view:nth-of-type(1) {
		margin-top: 20rpx;
		font-weight: 700;
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.free_curriculum view:nth-of-type(2),
	.free_curriculum view:nth-of-type(3) {
		color: #808080;
		font-size: 25rpx;
		margin-top: 15rpx;
	}
</style>